<template>
  <div>
    Watch
    <p>count is {{ count }}</p>
    <p><button @click="count++">+1</button></p>
    <p>person is {{ person }}</p>
    <p>
      <button @click="changePerson">change person</button>
    </p>
  </div>
</template>

<script setup>
// Vue3处处皆函数
import { ref, watch, watchEffect } from 'vue'
const count = ref(0)
const person = ref({
  name: 'zhangsan',
  age: 30
})

/**
 * 参数1：要监听的模型只
 * 参数2：函数
 */
watch(count, (newValue, oldValue) => {
  console.log('---newValue---oldValue', newValue, oldValue)
})

// 监听整个对象的变化
/**
 * 参数1：对象
 * 参数2：处理函数
 * 参数3：选项（深度监听、立即执行）
 */
watch(
  person,
  newValue => {
    console.log(newValue)
  }
  // {
  //   deep: true
  // }
)

// 只想监听对象中某个属性的变化
/**
 * 参数1：箭头函数，当只监听对象中的某个属性值的时候
 * 参数2：处理函数
 * 参数3：选项（深度监听、立即执行）
 */
watch(
  () => person.value.name,
  newValue => {
    console.log('---newValue---', newValue)
  }
  // {
  //   immediate: true
  // }
)

const changePerson = () => {
  person.value.name = '李四'
  // person.value.age = 20
  // person.value = {
  //   name: '李四',
  //   age: 30
  // }
}

/**
 * 执行时机：第一次会执行，相当于 immediate: true
 *         后续执行 person.value 的值发生了改变（但是person中的属性值发生改变是不会执行的）
 */
watchEffect(() => {
  console.log('---watchEffect---', person.value)
})
</script>
